<!--  -->
<template>
  <div class="home">
    <div class="header">
      宏烨经纪人
    </div>
    <div class="userinfo">
      <span></span>
      <div class="info">
        <img :src="ruleForm.img" alt="" />
        <p>{{ ruleForm.username }}</p>
      </div>
      <span></span>
    </div>
    <div class="houseMenu">
      <ol>
        <li @click="gonewHouse()">
          <p>188</p>
          <p>新房</p>
        </li>
        <li @click="goresoldHome()">
          <p>188</p>
          <p>二手房</p>
        </li>
        <li @click="goRenting()">
          <p>188</p>
          <p>出租房</p>
        </li>
      </ol>
    </div>
    <div class="menu">
      <ul>
        <li @click="goMessage()">
          <img src="../../assets/消息.jpg" alt="" />
          <p>消息</p>
        </li>
        <li @click="goWanted()">
          <img src="../../assets/求租.jpg" alt="" />
          <p>求租</p>
        </li>
        <li @click="goPurchase()">
          <img src="../../assets/求购.jpg" alt="" />
          <p>求购</p>
        </li>
        <li @click="gohomeMarket()">
          <img src="../../assets/楼市圈.jpg" alt="" />
          <p>楼市圈</p>
        </li>
        <li @click="goLive()">
          <img src="../../assets/直播.jpg" alt="" />
          <p>直播</p>
        </li>
        <li @click="goGroup()">
          <img src="../../assets/团购.jpg" alt="" />
          <p>团购</p>
        </li>
        <li @click="goRanking()">
          <img src="../../assets/排行榜.jpg" alt="" />
          <p>排行榜</p>
        </li>
        <li @click="goRecord()">
          <img src="../../assets/战绩.jpg" alt="" />
          <p>战绩</p>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
export default {
  // 组件状态值
  data() {
    return {
      ruleForm: [],
    };
  },
  // 计算属性
  computed: {},
  // 组件方法
  methods: {
    //跳转到新房
    gonewHouse() {
      this.$router.push("/newHome");
    },
    //跳转到二手房
    goresoldHome() {
      this.$router.push("/resoldHome");
    },
    //跳转到出租房
    goRenting() {
      this.$router.push("/renting");
    },
    //跳转到消息页面
    goMessage() {
      this.$router.push("/message");
    },
    //跳转到求租
    goWanted() {
      this.$router.push("/wanted");
    },
    //跳转到求购
    goPurchase() {
      this.$router.push("/purchase");
    },
    //跳转到楼市圈
    gohomeMarket() {
      this.$router.push("/homeMarket");
    },
    //跳转到直播
    goLive() {
      this.$router.push("/live");
    },
    //跳转到团购
    goGroup() {
      this.$router.push("/group");
    },
    //跳转到团购
    goRanking() {
      this.$router.push("/ranking");
    },
    //跳转到战绩
    goRecord() {
      this.$router.push("/record");
    },
    //获取登录信息
    Name() {
      this.ruleForm = localStorage.getItem("ruleForm");
      this.ruleForm = JSON.parse(this.ruleForm);
    },
  },
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    this.Name();
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<!--使用了scoped属性之后，父组件的style样式将不会渗透到子组件中，-->
<!--然而子组件的根节点元素会同时被设置了scoped的父css样式和设置了scoped的子css样式影响，-->
<!--这么设计的目的是父组件可以对子组件根元素进行布局。-->
<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  position: relative;
  top: 0;
  left: 0;
}
.header {
  width: 100%;
  line-height: 70px;
  font-size: 20px;
  color: #fff;
  background: #4381e6;
  padding: 0 10px;
}
.userinfo {
  width: 100%;
  height: 200px;
  background: #4381e6;
  display: flex;
  justify-content: space-between;
  .info {
    height: 200px;
    text-align: center;
    line-height: 40px;
    font-size: 18px;
    color: #fff;
    img {
      width: 100px;
      border-radius: 50%;
      border: 2px solid #fff;
      background: #fff;
    }
  }
}
.houseMenu {
  width: 90%;
  position: fixed;
  left: 5%;
  top: 240px;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #ccc;
  ol {
    display: flex;
    justify-content: space-between;
    padding: 10px 0;
    li {
      width: 33%;
      text-align: center;
      line-height: 30px;
      p:nth-child(1) {
        color: #4381e6;
        font-size: 30px;
      }
      p:nth-child(2) {
        color: #999;
        font-size: 16px;
      }
    }
  }
}
.menu {
  width: 100%;
  margin-top: 70px;
  ul {
    display: flex;
    flex-wrap: wrap;
    li {
      width: 33%;
      text-align: center;
      margin: 20px 0;
      line-height: 25px;
    }
  }
}
</style>
